<style scoped>
    @import "../styles/group.css";
</style>
<template>
    <header-component :page-name="pageName"></header-component>
    <!--<nav-component></nav-component>-->
<div class="page-grouplists page-wrap" id="page-grouplists">
    <div class="groupList_content" id="groupLists">
        <div class="groupList_item" v-for="(k,i) in data">
            <div class="item_top">
                <a href="javascript:;" data-href="?c=grouphome&id={{productid}}" v-link="{path:'/groupHome',query:{id:i.productid}}"><img :src="i.main_image"></a>
            </div>
            <div class="item_main">
                <p>{{i.main_title}}</p>
                <div class="item_main_box">
                    <p>{{i.join_num}}人团</p>
                    <p><span>{{i.price | currency '￥'}}</span></p>
                    <p><del> 单价买  {{i.sale_price}} </del></p>
                    <a class="item_main_btn" v-link="{path:'/groupHome',query:{id:i.productid}}">去开团 ></a>
                </div>
            </div>
        </div>
    </div>

    <div class="w-more" id="groupListMore" v-el:group-list-more>
        <template v-if="!hasMore&&page!=0">
            没有更多了
        </template>

        <template v-if="hasMore">
            <b class="ico ico-loading"></b> 努力加载中
        </template>
        <template v-if="!hasMore&&page==0">
            暂无记录
        </template>
    </div>
</div>

</template>
<script>
    import headerComponent from '../components/header'
//    import navComponent from '../components/nav'
    import Goods from '../module/goods'
    export default {
        filters: {

        },
        directives: {


        },
        data () {

            return {
                msg:'hello2',
                pageName:'拼团列表',
                data:[],
                page:1,
                pageSize:10,
                hasMore:true,
                loading:false
            }
        },
        created(){

            this.$dispatch('isLoading',true);

        },
        async ready () {

            await this.loadMore();

            document.addEventListener('scroll',this.getMore,false);

            this.$dispatch('isLoading',false);

        },
        components:{

            headerComponent,
//            navComponent
        },

        beforeDestroy () {

            document.removeEventListener('scroll',this.getMore,false);

        },

        methods: {

            async loadMore(){

                if(this.loading){

                    return;

                }
                this.loading=true;

                let res = await Goods.getGroupLists(this.page,this.pageSize);

                if(res.status==200){

                    this.page++;

                    if(!!res.data){

                        this.data.push(...res.data);

                    }

                    if(!!res.data&&res.data.length<10){

                        this.hasMore=false;

                    }

                    this.loading=false;

                }
            },

            async getMore(){

                let pos = this.$els.groupListMore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top-30> 0 && window.innerHeight - pos.top-30> 0) ||
                        (pos.top-30 <= 0 && pos.bottom >= 0))) {

                    await this.loadMore();

                }
            }
        }
    }
</script>
